<template>
  <div class="DB-gauge-container">
    <el-card class="app-container" id="gaugeEchart"></el-card>
  </div>
</template>

<script>
export default {
  name: 'DB-gauge',
  data() {
    return {}
  },
  mounted() {
    this.getLoadEcharts()
  },
  methods: {
    getLoadEcharts() {
      var myChart = this.$echarts.init(document.getElementById('gaugeEchart'))
      const option = {
        series: [
          {
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            center: ['50%', '75%'],
            radius: '90%',
            min: 0,
            max: 1,
            splitNumber: 8,
            axisLine: {
              lineStyle: {
                width: 6,
                color: [
                  [0.25, '#FF6E76'],
                  [0.5, '#FDDD60'],
                  [0.75, '#58D9F9'],
                  [1, '#7CFFB2'],
                ],
              },
            },
            pointer: {
              icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
              length: '12%',
              width: 10,
              offsetCenter: [0, '-60%'],
              itemStyle: {
                color: 'auto',
              },
            },
            axisTick: {
              length: 12,
              lineStyle: {
                color: 'auto',
                width: 2,
              },
            },
            splitLine: {
              length: 20,
              lineStyle: {
                color: 'auto',
                width: 5,
              },
            },
            axisLabel: {
              color: '#464646',
              fontSize: 12,
              distance: -40,
              rotate: 'tangential',
              formatter: function (value) {
                if (value === 0.875) {
                  return '高效达人'
                } else if (value === 0.625) {
                  return '中流砥柱'
                } else if (value === 0.375) {
                  return '更近一步'
                } else if (value === 0.125) {
                  return '需要努力'
                }
                return ''
              },
            },
            title: {
              offsetCenter: [0, '-10%'],
              fontSize: 14,
            },
            detail: {
              fontSize: 30,
              offsetCenter: [0, '-35%'],
              valueAnimation: true,
              formatter: function (value) {
                return Math.round(value * 100)
              },
              color: 'auto',
            },
            data: [
              {
                value: 0.82,
                name: '本年工作质量',
              },
            ],
          },
        ],
      }
      myChart.setOption(option)
    },
  },
}
</script>

<style lang="less" scoped>
.app-container {
  height: 300px;
  margin-left: 10px;
  margin-top: 10px;
}
</style>
